<template>
    <div>
        <div class='wrap column'>
            <div class='wrap-item column'>
                <div class='item flex' v-for="(item,index) in questionList" :key="index">
                    <div class='item-right column'>
                        <div class="question flex">
                            <img src="../assets/required.png" v-if="item.REQUIREDFLAG == 1">
                            <span>Q{{index + 1}}：{{item.CONTENT.detail}}({{item.SELTYPE == 0 ?'多选':'单选'}})</span>
                            <span v-if="item.REQUIREDFLAG == 1">(必填)</span>
                        </div>
                        <div class="radio-group flex">
                            <div class="radio flex" :class="{'active':items.selected == 1  }"  v-for="(items,key) in item.CONTENT.option" :key="key">
                                {{items.txt}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 加载中 -->
        <div class='loading column' v-if="showLoading">
            <img src='../assets/load.gif'></img>
            <p>拼命加载中...</p>
        </div>
    </div>
</template>
<script>

import { seeInquiryList } from "./../api/index";
export default {
    data(){
        return{
            id: '', //答卷id
            questionList: [], //答卷数组
            showLoading: false, //加载中变量
        }
    },
    mounted(){
        if(this.$route.params.id){
            this.id = this.$route.params.id
            sessionStorage.setItem('answerId',this.$route.params.id)
        }else{
            this.id = sessionStorage.getItem('answerId')
        }
        this.getAnswerList()
    },
    methods:{
        getAnswerList(){
            let mstr = sessionStorage.getItem('mstr')
            seeInquiryList(mstr,this.id).then((res)=>{
                if(res.data.status === 1){
                    this.questionList= res.data.data
                }else{
                    this.questionList= []
                }
                this.showLoading = false
            })
        }
    }
}
</script>
<style lang="scss" scoped>
@import "../base/css/_base.scss";
.wrap{
    padding: torem(50px) torem(50px) 0 torem(50px);
}
.wrap-item .item{
    margin-bottom: torem(50px);
    align-items: center;
    width: 100%;
    border-radius: torem(10px);
    font-size: torem(28px);
    color: #333;
}
.item .question{
    align-items: center;
}
.item .question img{
    width: torem(16px);
    height: torem(19px);
    margin-right: torem(10px);
}
.item .item-right{
    flex: 1;
}
.item .radio-group{
    margin-top: torem(33px);
    flex: 1;
    display: flex;
    font-size: torem(28px);
    background: #fff;
    padding: torem(30px);
    border-radius: torem(10px);
    flex-wrap: wrap;
    justify-content: space-between;
}

.radio-group .radio{
    margin-bottom: torem(20px);
    border-radius: torem(4px);
	border: solid 1px #d55940;
    color: #333333;
    font-size: torem(26px);
    padding: torem(12px) torem(22px);
    min-width: 46%;
}
.radio-group .radio.active{
    background: #d55940;
    color: #fff;
}
.submit{
    width: torem(380px);
	height: torem(80px);
	background-color: #d55940;
	border-radius: torem(8px);
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: torem(30px);
    margin:torem(200px) auto torem(50px);
}
</style>